<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>减一减 | 商品</title>
    <link rel="stylesheet" type="text/css" href="src/frozenui/1.2.0/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="src/frozenui/1.2.1/css/global.css">
    <link rel="stylesheet" type="text/css" href="src/static/demo.css">
    <style type="text/css"> 
    h2 center {
        font-weight: bold;
    }
    h4 b {
        color: red;
        font-size: 18px;
    }
    </style>
</head>
<body>
<div id="goods-list">
    <h2 class="title ui-border-b">
        <a class="ui-btn left" id="back">&lt; 返回</a>
        <center>商品</center>
    </h2>
    <div class="ui-searchbar-wrap ui-border-b">
        <div class="ui-searchbar">
            <i class="ui-icon-search"></i>
            <div class="ui-searchbar-text">搜索你寻找的商品</div>
            <div class="ui-searchbar-input"><input value="" type="tel" placeholder="搜索你寻找的商品" autocapitalize="off"></div>
            <i class="ui-icon-close"></i>
        </div>
        <button class="ui-searchbar-cancel">取消</button>
    </div>
    <div id="reflash" style="display: none; position: fixed; width: 100%;">
        <center><div class="ui-loading-wrap" style="color: gray; height: 50px;">
            <p id="r">准备获取新的商品</p>
            <i class="ui-loading"></i>
        </div></center>
    </div>
    <div class="ui-scroller" style="padding: 0px; margin: 0px;">
    <ul class="ui-list ui-list-link ui-border-tb" style="background: white" id="goods">
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">小米Note - <b>￥1299</b></h4>
                <p class="ui-nowrap">大屏旗舰，HiFi 双卡双待</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">小米4 - <b>￥999</b></h4>
                <p class="ui-nowrap">工艺与手感超乎想象</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">HUAWEI Mate7 - <b>￥2199</b></h4>
                <p class="ui-nowrap">爵士人生</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">iPhone6 16G - <b>￥4288</b></h4>
                <p class="ui-nowrap">岂止与大</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">iPhone6P 16G - <b>￥5088</b></h4>
                <p class="ui-nowrap">比大更大</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">小米Note - <b>￥1299</b></h4>
                <p class="ui-nowrap">大屏旗舰，HiFi 双卡双待</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">小米4 - <b>￥999</b></h4>
                <p class="ui-nowrap">工艺与手感超乎想象</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">HUAWEI Mate7 - <b>￥2199</b></h4>
                <p class="ui-nowrap">爵士人生</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">iPhone6 16G - <b>￥4288</b></h4>
                <p class="ui-nowrap">岂止与大</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">iPhone6P 16G - <b>￥5088</b></h4>
                <p class="ui-nowrap">比大更大</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">小米Note - <b>￥1299</b></h4>
                <p class="ui-nowrap">大屏旗舰，HiFi 双卡双待</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">小米4 - <b>￥999</b></h4>
                <p class="ui-nowrap">工艺与手感超乎想象</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">HUAWEI Mate7 - <b>￥2199</b></h4>
                <p class="ui-nowrap">爵士人生</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">iPhone6 16G - <b>￥4288</b></h4>
                <p class="ui-nowrap">岂止与大</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">iPhone6P 16G - <b>￥5088</b></h4>
                <p class="ui-nowrap">比大更大</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">iPhone6 16G - <b>￥4288</b></h4>
                <p class="ui-nowrap">岂止与大</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">iPhone6P 16G - <b>￥5088</b></h4>
                <p class="ui-nowrap">比大更大</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">iPhone6 16G - <b>￥4288</b></h4>
                <p class="ui-nowrap">岂止与大</p>
            </div>
        </li>
        <li class="ui-border-t">
            <div class="ui-list-img">
                <span style="background-image:url(src/img/phone.png)"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">iPhone6P 16G - <b>￥5088</b></h4>
                <p class="ui-nowrap">比大更大</p>
            </div>
        </li>
        <div style="height: 50px"></div>
    </ul>
    </div>
    <div class="ui-btn-group ui-btn-group-bottom">
        <button type="button" id="home">个人中心</button>
        <button type="button">我的活动</button>
        <button type="button">我的订单</button>
    </div>
</div>

        
    <!-- javascript开始 -->
    <script src="src/frozenjs/lib/zepto.min.js"></script>
    <script src="src/frozenjs/1.0.1/frozen.js"></script>
    <script>
    var h = window.outerHeight - 89;
    $('.ui-scroller').css("height", h);
    $('.ui-searchbar').tap(function(){
        $('.ui-searchbar-wrap').addClass('focus');
        $('.ui-searchbar-input input').focus();
    });
    $('.ui-searchbar-cancel').tap(function(){
        $('.ui-searchbar-wrap').removeClass('focus');
    });
    var scroll = new fz.Scroll('.ui-scroller', {
        scrollY: true,
        bounce: true
    });
    $('#goods').bind("touchmove",function(){
        if(scroll.getComputedPosition().y >= 50){
            $("#reflash").show();
            scroll.disable();
        }
    });
    // $('#goods').mousedown(function(){
    //     if(scroll.getComputedPosition().y >= 50){
    //         $("#reflash").show();
    //         scroll.disable();
    //     }
    // });
    $('#goods').bind("touchend",function(){
        if(scroll.getComputedPosition().y >= 50){
            scroll.enable();
            var el=$.loading({
                content:'获取中',
            })
            setTimeout(function(){
                el.loading("hide");
            },2000);
            el.on("loading:hide",function(){
                $('ul').prepend('<li class="ui-border-t"><div class="ui-list-img"><span style="background-image:url(src/img/phone.png)"></span></div><div class="ui-list-info"><h4 class="ui-nowrap">iPhone6 16G - <b>￥4288</b></h4><p class="ui-nowrap">岂止与大，刚加载的</p></div></li><li class="ui-border-t"><div class="ui-list-img"><span style="background-image:url(src/img/phone.png)"></span></div><div class="ui-list-info"><h4 class="ui-nowrap">iPhone6P 16G - <b>￥5088</b></h4><p class="ui-nowrap">比大更大，刚加载的</p></div></li>')
            });
            $("#reflash").hide();
        }
    });
    //兼容pc浏览器
    $('#goods').mouseup(function(){
        if(scroll.getComputedPosition().y >= 50){
            scroll.enable();
            var el=$.loading({
                content:'获取中',
            })
            setTimeout(function(){
                el.loading("hide");
            },2000);
            el.on("loading:hide",function(){
                $('ul').prepend('<li class="ui-border-t"><div class="ui-list-img"><span style="background-image:url(src/img/phone.png)"></span></div><div class="ui-list-info"><h4 class="ui-nowrap">iPhone6 16G - <b>￥4288</b></h4><p class="ui-nowrap">岂止与大，刚加载的</p></div></li><li class="ui-border-t"><div class="ui-list-img"><span style="background-image:url(src/img/phone.png)"></span></div><div class="ui-list-info"><h4 class="ui-nowrap">iPhone6P 16G - <b>￥5088</b></h4><p class="ui-nowrap">比大更大，刚加载的</p></div></li>')
            });
            $("#reflash").hide();
        }
    });
    $("#home").click(function(){
        window.location.href = 'home.html';
    })
    </script>
</body>
</html>